<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CRUD</title>
</head>
<body>
	<!-- session 过期处理 -->
	<script>
		function post(url, params, fn){
			$.post(url, params, function(data){
				//response预处理
				var resp = eval("(" + data + ")");
				if(resp.RSP_HEAD.RSP_STATUS == "-1"){
					alert("系统超时，转到登录页面");
					location.href="default.html";
					return;
				}
				fn(resp);
			}, "text");
			
		}
	</script>
	
	
	<h1><font color="blue">*****CRUD FOR CPU SAMPLES*****</font></h1>
	
	<h2>CREATE:</h2>
	
	<table id="tbCreate">
		<thead>
			<tr>
				<th>型号</th>
				<th>核心数</th>
				<th>主频</th>
				<th>价格</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input id="create_name" type="text"/></td>
				<td><input id="create_core" type="text"/></td>
				<td><input id="create_frequency" type="text"/></td>
				<td><input id="create_price" type="text"/></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4">
					<input id="create" type="button" value="CREATE"/>
				</td>
			</tr>
		</tfoot>
	</table>
	
	<script>
		$("#create").click(function(){
			post(
					"sample/sampleCreate.json",
					{
						REQ_MESSAGE : '{"REQ_HEAD":{"OPERATE":"create"},"REQ_BODY":{'
							+ '"name":"' + $('#create_name').val() + '",'
							+ '"core":"' + $('#create_core').val() + '",'
							+ '"frequency":"' + $('#create_frequency').val() + '",'
							+ '"price":"' + $('#create_price').val() + '"'
                       		+'}}'
					},
					function(data){
						if(data.RSP_HEAD.RSP_STATUS == "1"){
							alert("创建成功");
							$("#read").click();
						}else{
							alert("创建失败： " + data.RSP_HEAD.MSG);
						}
						$("#create_name").val("");
						$("#create_core").val("");
						$("#create_frequency").val("");
						$("#create_price").val("");
					}
			);
			
		});
	</script>
	
	<h2>READ:</h2>
	
	<table id="tbRead">
		<thead>
			<tr>
				<th width=150>型号</th>
				<th width=150>核心数</th>
				<th width=160>主频</th>
				<th width=150>价格</th>
				<th width=150>更新操作</th>
				<th width=150>删除操作</th>
			</tr>
		</thead>
		<tbody/>
		<tfoot>
			<tr>
				<td colspan="4">
					<input id="read" type="button" value="READ"/>
					&nbsp;&nbsp;&nbsp;
					<input id="jpa" name="queryType" type="radio" checked="checked"/> USING JPA 
					<input id="mybatis" name="queryType" type="radio"/> USING MyBatis
				</td>
			</tr>
		</tfoot>
	</table>
	
	<script>
		$("#read").click(function(){
			$("#tbRead").find("tbody").find("tr").remove();
			
			post(
				"sample/sampleRead.json",
				{
					REQ_MESSAGE : '{"REQ_HEAD":{"OPERATE":"'+ 
					($("#jpa").attr("checked") == "checked" ?  "read" : "readViaMybatis")
					+'"},"REQ_BODY":{}}'
				},
				function(data){
					if(data.RSP_HEAD.RSP_STATUS == "1"){
						var resultList = data.RSP_BODY.lstSampleInfo || [];
						var tempNode = $("#tbRead").find("tbody");					
						
						//开始铺数据
						for(var i = 0; i < resultList.length; i++){
							var r = resultList[i];
							tempNode = tempNode.append(
									"<tr id='listRow"+ i +"' align=center>" +
									"<td>" + 
									"<input id='list_id" + i + "' type='hidden' value='"+ r.id +"'/>" + 
									"<input id='list_specId" + i + "' type='hidden' value='"+ r.specId +"'/>" +  
									"<input id='list_name"+ i +"' type='text' value='" + r.name +"'/></td>" +
									"<td><input id='list_core"+ i +"' type='text' value='" + r.core +"'/></td>" +
									"<td><input id='list_frequency"+ i +"' type='text' value='" + r.frequency +"'/></td>" +
									"<td><input id='list_price"+ i +"' type='text' value='" + r.price +"'/></td>" +
									"<td><input type='button' value='update' onclick='_update("+ i +")'/></td>" +
									"<td><input type='button' value='delete' onclick='_delete("+ i +")'/></td>" +
									"</tr>"
							);
						}

					}else{
						alert("读取失败：" + data.RSP_HEAD.MSG);
					}
				}
			);
			
		});
		
		//更新行记录
		function _update(index){
			post("sample/sampleUpdate.json", {
				REQ_MESSAGE : '{"REQ_HEAD":{"OPERATE":"update"},"REQ_BODY":{'
					+ '"id":"' + $('#list_id'+ index).val() + '",'
					+ '"specId":"' + $('#list_specId' + index).val() + '",'
					+ '"name":"' + $('#list_name' + index).val() + '",'
					+ '"core":"' + $('#list_core' + index).val() + '",'
					+ '"frequency":"' + $('#list_frequency' + index).val() + '",'
					+ '"price":"' + $('#list_price' + index).val() + '"'
               		+'}}'				
			}, function(data){
				if(data.RSP_HEAD.RSP_STATUS == "1"){
					alert("更新成功");
				}else{
					alert("更新失败：" + data.RSP_HEAD.MSG);
				}			
			});
		}
		//删除行记录
		function _delete(index){
			post("sample/sampleDelete.json", {
				REQ_MESSAGE : '{"REQ_HEAD":{"OPERATE":"delete"},"REQ_BODY":{'
					+ '"id":"' + $('#list_id'+ index).val() + '",'
					+ '"specId":"' + $('#list_specId' + index).val() + '"'
               		+'}}'	
			},function(data){
				if(data.RSP_HEAD.RSP_STATUS == "1"){
					alert("删除成功");
					$("#listRow" + index).remove();
				}else{
					alert("删除失败：" + data.RSP_HEAD.MSG);
				}			
			});
		}
	</script>
</body>
</html>